<template>
  <view class="hire_page">
    <view class=" _w-max _top _left _z-index-5 _pos-fixed _top _left" style="background-color: #4C91FA;">
      <view :style="{ width: '100%', height: recHeight }"></view>
      <view class="felx_c h_96 f_s_18" style="position: relative;height: 96rpx;color: #FFFFFF;">
        <view @click="back" style="position: absolute;left: 24rpx;top: 24rpx;">
          <image style="width: 48rpx;height: 48rpx;"
            src="https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png" mode="" />
        </view>
        签订合同
      </view>
    </view>
    <view class="top_bg">
      <view style="background-color: rgb(76,145,250);">
        <view :style="{ width: '100%', height: recHeight }"></view>
        <view class="_w-max" style="height: 96rpx;"></view>
        <view style="height: 72rpx;"></view>
      </view>
      <view style="height: 384rpx;background: linear-gradient( 180deg, rgb(76,145,250) 0%, #F5F5F5 100%);"></view>
    </view>
    <view :style="{ width: '100%', height: recHeight }"></view>
    <view class="_w-max h_96" style="height: 96rpx;"></view>
    <view class="container">
      <view class="container_top">
        <image class="hire_liucheng"
          src="https://taxi.raxan.xyz/wechat/static/images/23f8b7b722e17c9fd085d408a7bd420.png" />
      </view>
      <view class="form_area">
        <view class="black_bold">选择身份</view>
        <radio-group @change="radioChange">
          <view class="item">
            <view class="left">
              <view class="name">个人身份</view>
            </view>
            <view class="right">
              <radio :value="0" :checked="value ==0" />
            </view>

          </view>
          <view class="item">
            <view class="left">
              <view class="name">企业身份</view>
            </view>
            <view class="right">
              <radio :value="1" :checked="value ==1" />
            </view>

          </view>
        </radio-group>
      </view>
    </view>
    <view class="btn" style="position: fixed;" @click="submit">下一步</view>
  </view>
</template>

<script>
  const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name
  const IMAGES = {
    BANNER: concat('banner.png'),
    CHEVRO: 'https://taxi.raxan.xyz/wechat/static/images/store_detail/a-chevron-left.png',
    ARROW_RIGHT: concat('arrow_right.png'),
  }


  export default {
    data() {
      return {
        recHeight: 0,
        // 企业1 个人0
        value: 0,
        imgs: IMAGES,
        value: 0,
        id: '',
        orderId: '',
        type: ''
      }
    },
    onLoad(options) {
      this.id = options.id;
      this.orderId = options.order_id;
      this.type = options.type;
      this.getPhoneInfo();
    },
    methods: {
      back(){
        uni.navigateBack()
      },
      // 获取顶部高度信息
      getPhoneInfo() {
        uni.getSystemInfo({
          success: (res) => {
            this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
          }
        });
      },
      radioChange(e) {
        const value = e.detail.value
        this.value = +value
      },
      submit() {
        const {
          id,
          orderId,
          type
        } = this
        if(this.value==0){
           uni.navigateTo({ url: `/pages/hire_sub/sublease/sign?id=${id}&order_id=${orderId}&type=${type}` })
        }else{
           uni.navigateTo({ url: `/pages/myCar/companyAuth?id=${id}&order_id=${orderId}&type=${type}` })
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  .top_bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    height: 456rpx;
  }

  .h_96 {
    height: 96rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    padding: 32rpx 28rpx;
    border-radius: 10rpx;
    margin-bottom: 24rpx;
    border-bottom: 2rpx solid #E7E7E7;

    &:last-child {
      border-bottom: none;
    }

    .left {
      .name {
        margin-bottom: 24rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #111e36;
      }

      .card-no {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.4);
    }
  }

  .c_fff {
    color: #FFFFFF;
  }

  .btn {
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
    position: fixed;
    left: 32rpx;
    right: 32rpx;
    bottom: 8rpx;
    z-index: 10;
  }

  .f_s_18 {
    font-size: 36rpx;
  }

  .felx_c {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .black_bold {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #111E36;
    line-height: 38rpx;
    margin-bottom: 24rpx;
  }

  .gray_sub {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
    line-height: 33rpx;
    margin-bottom: 28rpx;
  }

  .hire_page {
    box-sizing: border-box;
    position: relative;
    min-height: 101vh;
    background: #F8F9FC;
    color: rgba(0, 0, 0, 0.9);

    .formItem {
      box-sizing: content-box;
      padding: 14rpx 0;
    }

    .container {
      position: relative;
      z-index: 2;

      .container_top {
        margin: 32rpx 26rpx 36rpx 32rpx;

        .hire_liucheng {
          width: 100%;
          height: 130rpx;
          left: 0;
          top: 0;
        }
      }

      .form_area {
        margin: 0 32rpx;
        padding: 32rpx;
        padding-bottom: 12rpx;
        background: #FFFFFF;
        border-radius: 16rpx;

        /deep/ .uni-forms-item__label {
          color: #333333 !important;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500 !important;
          font-size: 28rpx !important;
        }
      }

    }
  }
</style>